<template>
	<view class="apply">
		<view class="home">
				 <view class="home-img">
					 <image :src="img"></image>
				 </view>
				 <view class="home-list" @click="hanldAcitviInfo()">
					 <view style="font-size: 15px;color: #333333;font-weight: bold;">{{title}}</view>
					 <view class="home-book">{{subtitle}}</view>
					 <view class="home-add">
						 <view style="font-size: 16px;color: #FF5F49;" v-if="userInfo.level===2||userInfo.level===3">
							 <text style="font-size: 12px;">￥</text>{{vipPrice}}
						</view>
						<view style="font-size: 16px;color: #FF5F49;" v-else>
							 <text style="font-size: 12px;">￥</text>{{price}}
						</view>
					 </view>
				 </view>
			 </view>
			 <view class="info">
				 <view class="info-title">基本信息</view>
				 <view class="info-wrapper">
					 <view class="info-name">家长姓名</view>
					 <input type="text" placeholder="请填写真实家长姓名" v-model="parent_name"/>
				 </view>
				 <view class="info-wrapper">
					 <view class="info-name">家长电话</view>
					 <input type="text" placeholder="请填写真实家长电话" v-model="parent_tel"/>
				 </view>
				 <view class="info-wrapper">
					 <view class="info-name">孩子姓名</view>
					 <input type="text" placeholder="请填写真实孩子姓名" v-model="child_name"/>
				 </view>
				 <view class="info-wrapper">
					 <view class="info-name">孩子年龄</view>
					 <input type="text" placeholder="请填写真实孩子年龄" v-model="child_age"/>
				 </view>
			 </view>
			 
			 <view class="ativ-but">
			 	<view class="ativ-item">
			 		<text style="font-size: 16px;color: #333333;">合计
					<text style="color: #FF5F49;"  v-if="userInfo.level===2||userInfo.level===3">￥{{vipPrice}}</text>
					<text style="color: #FF5F49;" v-else>￥{{price}}</text>
					</text>
			 	</view>
			 	<view class="ac-once-but" @click="hanldapplyOK()">确认报名</view>
			 </view>
			 
			 <!--授权弹框-->
			 <view class="search-body">
			 	<view class="dialog-container" v-if="tokenShow">
			 		<view class="dialog-mask"></view>
			 		<view class="dialog-info">
			 			<view class="dialog-title">您还未授权</view>
			 			<view class="dialog-content">请先授权再进行操作</view>
			 			<view class="dialog-footer">
			 				<button @click="dontLogin()" class="dialog-btn">暂不登录</button>
			 				<button @getuserinfo="getLogin" open-type="getUserInfo" class="dialog-btn" style="background-color:#FF5F49;color: #fff;">立即授权</button>
			 			</view>
			 		</view>
			 	</view>
			 </view>
			 
	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name:"",
				age:"",
				act_id:Number,
				parent_name:"",//家长姓名
				parent_tel:"",//家长电话
				child_name:"",//孩子姓名
				child_age:"",//孩子年龄
				img:"",
				title:"",
				subtitle:"",
				price:"",
				
				token:"",
				tokenShow:"",
				uid:"",//海报ID
				act:"",//活动id
				userInfo:"",
				vipPrice:""
			}
		},
		onShow(){
			this.token = uni.getStorageSync('accessToken')
			if(this.token==''){
				this.tokenShow = true;
			}else{
				this.tokenShow = false;
				this.$http.get('/user/info').then((response) => {
					const res = response.data;
					if (res.code == 0) {
						this.userInfo = res.data;
					}
				})
			}
		
		},
		onLoad(option) {
			console.log(option)
			if(option.id){
				this.act_id = option.id;
				this.img = option.img;
				this.title = option.title;
				this.subtitle = option.subtitle;
				this.price = option.price;
				this.vipPrice = option.vipPrice;
				console.log(this.act_id)
			}
			if(option.uid){
				this.uid = option.uid;
			}
			if(option.act){
				this.act = option.act;
			}
				 const value =	uni.getStorageSync('signInfo');
				 let signInfo = JSON.parse(value);
				  this.parent_name = signInfo.formData.parent_name;//家长姓名
				  this.parent_tel =  signInfo.formData.parent_tel,//家长电话
				  this.child_name  = signInfo.formData.child_name,//孩子姓名
				  this.child_age = signInfo.formData.child_age,//孩子年龄
				 console.log(signInfo)
		},
		methods: {
			hanldapplyOK(){
					if(this.token==''){
						this.tokenShow = true;
					}else{
						
						if(!this.parent_name){
							uni.showToast({title: '请输入家长姓名', icon: 'none'});
							return;
						}
						if(!(/^[1][3-9][0-9]{9}$/.test(this.parent_tel))){
							uni.showToast({title: '请输入正确的手机号', icon: 'none'});
							return;
						}
						if(!this.child_name){
							uni.showToast({title: '请输入孩子姓名', icon: 'none'});
							return;
						}
						if(!this.child_age){
							uni.showToast({title: '请输入孩子年龄', icon: 'none'});
							return;
						}
						
						const formData = {
							act_id: this.act_id,//id
							parent_name:this.parent_name,//家长姓名
							parent_tel:this.parent_tel,//家长电话
							child_name:this.child_name,//孩子姓名
							child_age:this.child_age,//孩子年龄
							uid:this.uid//海报id
						}
						console.log( JSON.stringify(formData))
						uni.setStorageSync('signInfo', JSON.stringify({formData}));
						this.$http.post('/activity/join', formData).then((response) => {
							const res = response.data;
							if(res.code==0){
								uni.navigateTo({
									url: `/pages/find/payApply?id=${JSON.stringify(res)}&act_id=${this.act_id}&title=${this.title}&img=${this.img}&act=${this.act}`
								});
							}else{
								uni.showToast({title: res.msg, icon: 'none'});
							}
						
						})
					}
			},
			
			dontLogin(){
				this.tokenShow = false
			},
			//授权
			getLogin() {
				var that = this;
				wx.login({
					//获取code 使用wx.login得到的登陆凭证，用于换取openid==token代替
					success(res) {
						if (res.code) {
							console.log(res.code);
							that.code = res.code;
							//使用 wx.getSetting 获取用户当前的授权状态。
							wx.getSetting({
								success(res) {
									if (res.authSetting['scope.userInfo']) { //已授权=>getUserInfo
										wx.getUserInfo({
											success(res) {
												console.log(res)
												console.log("ressss")
												console.log(that.userinfo)
												
												const formData = {
													code: that.code,
													avatar:res.userInfo.avatarUrl,
													nickname:res.userInfo.nickName
												}
												that.$http.post('/login/wxLogin', formData).then((response) => {
													const res = response.data;
													console.log(res.data.token);
													if(res.data.token){
														that.$http.setConfig((config) => { /* 设置全局配置 */
														  config.header = {
															...config.header,
															token: res.data.token,
														  }
														  return config
														})
														wx.setStorageSync("accessToken", res.data.token); //成功之后存入token
													}
													that.token = res.data.token;
													that.tokenShow = false;
													uni.showToast({title: res.msg, icon: 'none'});
												})
											},
											fail(err) {
												console.log(err)
											}
										})
									}
								}
							})
						} else {
							console.log("登录失败！" + res.errMsg);
						}
					}
				});
			}
			

		}
	}
</script>

<style scoped>
.apply{
	width: 100%;
}
.home{
	height: 115px;
	background-color: #FFFFFF;
	margin: 10px 17px;
	padding: 10px;
	border-radius: 5px;
	display: flex;
	flex-direction: row;
	align-items: center;
	position: relative;
}
	
	
.home-img image{
	width: 95px;
	height: 95px;
}
.home-img{
	    margin-right: 10px;
}
.home-add{
	display: flex;
	flex-direction: row;
	    justify-content: space-between;
		align-items: center;
		padding-top: 17px;
}
.home-list{
	    width: 100%;
}
.home-book{
	height:20px;
	/* background:rgba(247,247,247,1); */
	border-radius:3px;
	color: #999999;
	font-size: 10px;
	text-align: left;
	line-height: 21px;
}
.home-photo{
	display: flex;
	flex-direction: row;
}
.home-photo image{
/*  #ifdef  H5  */
	width: 25px;
	height: 25px;
	/*  #endif  */
	
	/*  #ifdef  MP-WEIXIN */
	width: 20px;
	height: 20px;
	/*  #endif  */
	    border-style: solid;
	    border-color: #fff;
	    border-radius: 50%;
		 margin: 0px -40upx;
}
.home-stus{
	    width: 39px;
	    height: 39px;
	    position: absolute;
	    right: 0;
	    top: 0;
}
.info{
	background:rgba(255,255,255,1);
	border-radius:5px;
	padding: 10px;
	    margin: 0 17px;
}
.info-title{
	color: #666666;
	font-size: 14px;
	font-weight: bold;
}
.info-name{
	    color: #333333;
	    font-size: 16px;
		font-weight: bold;
}
.info-wrapper{
	display: flex;
	flex-direction: row;
	border-bottom: 1px solid #F5F5F5;   
	 align-items: center;
	 margin: 15px 0;
}
.info input{
	color: #333333;
	padding-left: 10px;
	    font-size: 14px;
}
	
.uni-input-placeholder{
	color: #DBDBDB;
}
.ativ-but{
	background-color: #FFFFFF;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	position: fixed;
	bottom: 0;
	width: 100%;
	    padding-bottom: 28px;
	    align-items: center;
	    padding-left: 17px;
}
.ativ-item{
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-right: 10px;
}
.ac-once-but{
	width:188px;
	height:49px;
	background:rgba(255,95,73,1);
	font-weight:500;
	line-height:49px;
	color: #FFFFFF;
	font-size: 16px;
	text-align: center;
}
.ac-text{
	color: #999999;
}


	/*授权*/
	.dialog-mask {
		position: fixed;
		z-index: 1000;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.3);
	}
	
	.dialog-info {
		position: fixed;
		z-index: 5000;
		width: 80%;
		max-width: 600rpx;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		background-color: #ffffff;
		text-align: center;
		overflow: hidden;
	}
	
	.dialog-title {
		font-size: 36rpx;
		padding: 30rpx 30rpx 10rpx;
	}
	
	.dialog-content {
		padding: 10rpx 30rpx 20rpx;
		min-height: 80rpx;
		font-size: 32rpx;
		line-height: 1.3;
		word-wrap: break-word;
		word-break: break-all;
		color: #999999;
	}
	
	.dialog-footer {
		display: flex;
		align-items: center;
		position: relative;
		line-height: 90rpx;
		font-size: 34rpx;
	}
	
	.dialog-btn {
		display: block;
		-webkit-flex: 1;
		flex: 1;
		position: relative;
		font-size: 16px;
	}
	
	button {
		background-color: #fff;
		border-radius: 0;
	}
	
	button::after {
		border-radius: 0;
	}
	
</style>
